<template>
  <div class="map-container">
    <div class="map-header" style="z-index: 20">
      <div class="map-header-left">
        <div class="header-left-item">
          <img src="@/assets/icon/msg.png" alt="消息" class="item-icon" />
          <span class="item-text">星宝</span>
        </div>
        <div class="header-left-item">
          <span class="item-text">数据开关</span>
          <el-switch v-model="dataSwitch" class="item-switch" />
        </div>
        <div class="header-left-item">
          <el-dropdown class="item-dropdown">
            <span class="el-dropdown-link">
              指数说明
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>经济指数</el-dropdown-item>
                <el-dropdown-item>环境指数</el-dropdown-item>
                <el-dropdown-item>社会指数</el-dropdown-item>
                <el-dropdown-item>治理指数</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <!-- <div class="map-header-right">
        <div class="datetime-display">
          <div class="time">{{ currentTime }}</div>
          <div
            style="display: flex; flex-direction: column; align-items: start"
          >
            <div class="date">{{ currentDate }}</div>
            <div class="weekday">{{ currentWeekday }}</div>
          </div>
        </div>
        <WeatherDisplay />
      </div> -->
    </div>
    <Header />
    <!-- 左侧可视化组件 -->
    <ScreenLeft />
    <!-- 3D 地图的容器 -->
    <div id="map"></div>
    <!-- 顶部图标导航 -->
    <div class="top-icons">
      <div class="top-icon-item">
        <img src="../../assets/icon/list1.png" />
        <div class="icon-item-right">
          <p class="index-text">综合指数</p>
          <p class="value-text">2123</p>
        </div>
      </div>
      <div class="top-icon-item">
        <img src="../../assets/icon/list2.png" />
        <div class="icon-item-right">
          <p class="index-text">安全指数</p>
          <p class="value-text">23</p>
        </div>
      </div>
      <div class="top-icon-item">
        <img src="../../assets/icon/list3.png" />
        <div class="icon-item-right">
          <p class="index-text">文明指数</p>
          <p class="value-text">23</p>
        </div>
      </div>
      <div class="top-icon-item">
        <img src="../../assets/icon/list4.png" />
        <div class="icon-item-right">
          <p class="index-text">服务指数</p>
          <p class="value-text">23</p>
        </div>
      </div>
      <div class="top-icon-item">
        <img src="../../assets/icon/list5.png" />
        <div class="icon-item-right">
          <p class="index-text">营商指数</p>
          <p class="value-text">23</p>
        </div>
      </div>
    </div>
    <!-- 右侧可视化组件 -->
    <ScreenRight />
    <!-- 弹窗 -->
    <div
      v-if="showPopup"
      class="popup-modal"
      :style="{ left: popupPosition.x + 'px', top: popupPosition.y + 'px' }"
    >
      <div class="popup-content">
        <h3 style="font-size: 18px">{{ selectedRegion.name }}</h3>
        <div
          id="chart-container"
          :style="{ left: popupPosition.x + 'px', top: popupPosition.y + 'px' }"
        ></div>
      </div>
    </div>

    <!-- 底部图标导航 -->
    <BottomIconNavigation @iconClick="handleIconClick" />
  </div>
</template>

<script setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
  CSS2DRenderer,
  CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import { onMounted, ref, onUnmounted, watch } from "vue";
import router from "@/router";
import * as echarts from "echarts";
// import { ArrowDown } from "@element-plus/icons-vue";

import * as d3 from "d3";
// import SelectorGroup from "@/components/OperateTheBrainComponents/SelectorGroup.vue";
import ScreenLeft from "@/components/OperateTheBrainComponents/ScreenLeft.vue";
import ScreenRight from "@/components/OperateTheBrainComponents/ScreenRight.vue";
import BottomIconNavigation from "@/components/BottomIconNavigation.vue";
import Header from "@/components/Header.vue";
// import WeatherDisplay from "@/components/WeatherDisplay.vue";

// 弹窗相关的响应式数据
const showPopup = ref(false);
const popupPosition = ref({ x: 0, y: 0 });
const selectedRegion = ref({ name: "", code: "" });

// 新增的响应式数据
const dataSwitch = ref(true);

// 时间日期相关的响应式数据
const currentTime = ref("");
const currentDate = ref("");
const currentWeekday = ref("");
let timeInterval = null;

// 底部图标相关数据
const selectedIcon = ref(0); // 默认选中第一个图标

let chart = null;

// 监听弹窗显示状态
watch(showPopup, (newValue) => {
  if (newValue) {
    // 延迟初始化图表，确保 DOM 元素已渲染
    setTimeout(() => {
      initChart();
    }, 100);
  } else {
    // 销毁图表实例
    if (chart) {
      chart.dispose();
      chart = null;
    }
  }
});

// 初始化图表
const initChart = () => {
  const chartDom = document.getElementById("chart-container");
  if (chartDom) {
    chart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: "category",
        data: [],
      },
      yAxis: {
        type: "value",
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      grid: {
        top: "80%",
        left: "3%",
        right: "3%",
        // bottom: '40%',
        containLabel: true,
      },
      series: [
        {
          data: [120, 200, 150, 80, 70],
          type: "bar",
          itemStyle: {
            color: "yellow",
          },
          label: {
            show: true,
            position: "top",
          },
        },
      ],
    };
    chart.setOption(option);
  }
};
("");

// 更新时间的函数
const updateDateTime = () => {
  const now = new Date();

  // 格式化时间 HH:MM:SS
  currentTime.value = now.toLocaleTimeString("zh-CN", {
    hour12: false,
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });

  // 格式化日期 YYYY年MM月DD日
  currentDate.value = now.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });

  // 格式化星期
  currentWeekday.value = now.toLocaleDateString("zh-CN", {
    weekday: "long",
  });
};

onMounted(() => {
  // 初始化时间显示
  updateDateTime();
  // 每秒1秒更新一次时间
  timeInterval = setInterval(updateDateTime, 1000);

  createMainFunc();
});

// 组件销毁时清理定时器
onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
    timeInterval = null;
  }
});

// 级联选择器变化处理
const handleCascaderChange = (value) => {
  console.log("级联选择器选择:", value);
  // 这里可以根据选择的区域更新地图视图
};

// 下拉选择器变化处理
const handleDropdownChange = (value) => {
  console.log("下拉选择器选择:", value);
  // 这里可以根据选择的数据类型更新地图显示
};

// 底部图标点击处理
const handleIconClick = (data) => {
  router.push(data.path);
};

//3D地图主函数
const createMainFunc = () => {
  let map;
  // 创建主场景
  const scene = new THREE.Scene();

  // 添加环境光到场景中
  const ambientLight = new THREE.AmbientLight(0xd4e7fd, 4);
  scene.add(ambientLight);

  // 添加多个方向光以照亮场景
  const directionalLight = new THREE.DirectionalLight(0xe8eaeb, 0.2);
  directionalLight.position.set(0, 10, 5);
  const directionalLight2 = directionalLight.clone();
  directionalLight2.position.set(0, 10, -5);
  const directionalLight3 = directionalLight.clone();
  directionalLight3.position.set(5, 10, 0);
  const directionalLight4 = directionalLight.clone();
  directionalLight4.position.set(-5, 10, 0);
  scene.add(directionalLight);
  scene.add(directionalLight2);
  scene.add(directionalLight3);
  scene.add(directionalLight4);

  // 设置透视投影相机
  const mapContainer = document.getElementById("map");
  const mapWidth = mapContainer.clientWidth;
  const mapHeight = mapContainer.clientHeight;

  const camera = new THREE.PerspectiveCamera(
    80,
    mapWidth / mapHeight,
    0.1,
    1000
  );
  camera.position.y = 0.9; // 调整摄像机高度
  camera.position.z = 0.9; // 调整摄像机距离
  camera.rotation.x = -Math.PI / 100; // 调整摄像机的俯视角度为30度

  // 创建 CSS2DRenderer 用于渲染标签
  const labelRenderer = new CSS2DRenderer();
  labelRenderer.domElement.style.position = "absolute";
  labelRenderer.domElement.style.top = "0px";
  labelRenderer.domElement.style.pointerEvents = "none";
  labelRenderer.setSize(mapWidth, mapHeight);
  document.getElementById("map").appendChild(labelRenderer.domElement);

  // 创建 WebGLRenderer 用于渲染 3D 场景
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(mapWidth, mapHeight);
  document.getElementById("map").appendChild(renderer.domElement);

  // 添加轨道控制器以允许用户与场景交互
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.target.set(0, 0, 0);
  // 使初始化视角更“立起来”，几乎正对屏幕
  camera.position.set(0, 1.2, 0.5);
  camera.lookAt(controls.target);
  controls.update();

  // 动画循环以渲染场景和标签
  const animate = () => {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
  };
  animate();

  // 在窗口大小调整时调整渲染器和相机
  window.addEventListener("resize", () => {
    const mapContainer = document.getElementById("map");
    const mapWidth = mapContainer.clientWidth;
    const mapHeight = mapContainer.clientHeight;

    camera.aspect = mapWidth / mapHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(mapWidth, mapHeight);
    labelRenderer.setSize(mapWidth, mapHeight);

    if (chart) {
      chart.resize();
    }

    // 更新所有标签位置
    if (map) {
      map.children.forEach((unit) => {
        const label = unit.children.find((c) => c instanceof CSS2DObject);
        if (label) {
          const worldPosition = new THREE.Vector3();
          label.getWorldPosition(worldPosition);

          const screenPosition = worldPosition.clone().project(camera);

          const widthHalf = mapWidth / 2;
          const heightHalf = mapHeight / 2;

          const x = screenPosition.x * widthHalf + widthHalf;
          const y = -(screenPosition.y * heightHalf) + heightHalf;

          // 更新弹窗位置
          popupPosition.value.x = x;
          popupPosition.value.y = y;
        }
      });
    }
  });

  // 加载 GeoJSON 数据并创建地图
  const url = new URL(
    "../../assets/landJSON/lingshuiMerge.geojson",
    import.meta.url
  ).href;
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      map = createMap(data);
      scene.add(map);

      // 计算并打印每个图斑中心点的屏幕坐标
      map.children.forEach((unit) => {
        const label = unit.children.find((c) => c instanceof CSS2DObject);
        if (label) {
          const worldPosition = new THREE.Vector3();
          label.getWorldPosition(worldPosition);

          const screenPosition = worldPosition.clone().project(camera);

          const mapContainer = document.getElementById("map");
          const width = mapContainer.clientWidth;
          const height = mapContainer.clientHeight;
          const widthHalf = width / 2;
          const heightHalf = height / 2;

          const x = screenPosition.x * widthHalf + widthHalf;
          const y = -(screenPosition.y * heightHalf) + heightHalf;
        }
      });

      // 添加鼠标交互事件监听器
      let lastSelected = null; // 记录上一次选中的对象
      window.addEventListener("pointerdown", (event) => {
        const mouse = new THREE.Vector2();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        const raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster
          .intersectObjects(map.children, true) // 检查所有子对象
          .filter((item) => item.object.type === "Mesh"); // 仅处理 Mesh 类型

        if (intersects.length > 0) {
          const selected = intersects[0].object;
          const parent = selected.parent; // 获取父对象

          // 如果点击的是已经升高的对象，则让它回到原位置
          if (parent.userData.raised) {
            // 恢复颜色
            if (parent.userData.originalColors) {
              parent.children.forEach((child, index) => {
                if (
                  child.material &&
                  child.type === "Mesh" &&
                  parent.userData.originalColors[index] !== undefined
                ) {
                  child.material.color.set(
                    parent.userData.originalColors[index]
                  );
                }
              });
            } else if (parent.userData.originalColor !== undefined) {
              parent.children.forEach((child) => {
                if (child.material && child.type === "Mesh") {
                  child.material.color.set(parent.userData.originalColor);
                }
              });
            }
            // 恢复原始高度
            parent.position.z = parent.userData.originalZ || 0; // 使用保存的原始高度
            parent.userData.raised = false; // 标记为未升高

            // 恢复标签字体大小
            parent.children.forEach((child) => {
              if (child instanceof CSS2DObject) {
                child.element.style.fontSize = "16px"; // 恢复字体大小
              }
            });

            // 清除最后选中的对象引用
            lastSelected = null;
            showPopup.value = false;
            return;
          }

          // 如果有上一次选中的对象且不是当前对象，恢复其颜色和位置
          if (lastSelected && lastSelected !== parent) {
            // 恢复颜色
            if (lastSelected.userData.originalColors) {
              lastSelected.children.forEach((child, index) => {
                if (
                  child.material &&
                  child.type === "Mesh" &&
                  lastSelected.userData.originalColors[index] !== undefined
                ) {
                  child.material.color.set(
                    lastSelected.userData.originalColors[index]
                  );
                }
              });
            } else if (lastSelected.userData.originalColor !== undefined) {
              lastSelected.children.forEach((child) => {
                if (child.material && child.type === "Mesh") {
                  child.material.color.set(lastSelected.userData.originalColor);
                }
              });
            }
            lastSelected.position.z = lastSelected.userData.originalZ || 0; // 使用保存的原始高度
            lastSelected.userData.raised = false; // 标记为未升高

            // 恢复标签字体大小
            lastSelected.children.forEach((child) => {
              if (child instanceof CSS2DObject) {
                child.element.style.fontSize = "16px"; // 恢复字体大小
              }
            });
          }

          // 打印 XJQYDM 字段
          const xjqydm = parent.userData.XJQYDM;
          console.log("XJQYDM:", xjqydm);

          // 显示弹窗
          selectedRegion.value.name =
            parent.children.find((child) => child instanceof CSS2DObject)
              ?.element.textContent || "未知区域";
          selectedRegion.value.code = xjqydm || "无";
          popupPosition.value.x = event.clientX;
          popupPosition.value.y = event.clientY;
          showPopup.value = true;

          // 保存原始状态（在改变颜色之前保存）
          if (parent.userData.originalZ === undefined) {
            parent.userData.originalZ = parent.position.z; // 保存原始Z位置
          }
          if (parent.userData.originalColor === undefined) {
            // 保存所有 Mesh 子对象的颜色
            parent.userData.originalColors = [];
            parent.children.forEach((child, index) => {
              if (child.material && child.type === "Mesh") {
                parent.userData.originalColors[index] =
                  child.material.color.getHex();
              }
            });
            // 为了兼容性，也保存第一个颜色
            if (parent.userData.originalColors.length > 0) {
              parent.userData.originalColor =
                parent.userData.originalColors.find(
                  (color) => color !== undefined
                );
            }
          }

          // 改变颜色
          parent.children.forEach((child) => {
            if (child.material && child.type === "Mesh") {
              child.material.color.set(0x7cf7fd); // 设置为长高后的颜色 #7CF7FD
            }
          });

          // 增加高度效果
          parent.position.z = parent.userData.originalZ + 0.2; // 在原始高度基础上增加
          parent.userData.raised = true; // 标记为已升高

          // 增大标签字体
          parent.children.forEach((child) => {
            if (child instanceof CSS2DObject) {
              child.element.style.fontSize = "18px"; // 增大字体
            }
          });

          // 更新最后选中的对象
          lastSelected = parent;
        } else {
          // 点击空白区域时隐藏弹窗
          showPopup.value = false;
        }
      });
    });
};

// 创建 D3 的 geoMercator 投影用于坐标转换
const offsetXY = d3.geoMercator();

// 从 GeoJSON 数据创建地图的函数
const createMap = (data) => {
  const map = new THREE.Object3D();
  const center = d3.geoCentroid(data); // 计算 GeoJSON 数据的中心点
  offsetXY.center(center).translate([0, 0]);

  data.features.forEach((feature) => {
    const unit = new THREE.Object3D();
    const { coordinates, type } = feature.geometry;
    const properties = feature.properties;

    // 定义深度变量
    const depth = 0.1; // 默认深度值

    // 为每个地理单元设置固定颜色
    const color = 0x4a8ff6; // 默认颜色
    const raisedColor = 0x7cf7fd; // 长高后的颜色
    const borderColor = 0xadd8e6; // 边界线颜色

    // 根据几何类型（Polygon 或 MultiPolygon）处理几何数据
    if (type === "Polygon" || type === "MultiPolygon") {
      const processCoordinates = (coords) => {
        coords.forEach((ring) => {
          const mesh = createMesh(ring, color, depth);
          const line = createLine(ring, depth, borderColor);
          unit.add(mesh, ...line);
        });
      };

      if (type === "Polygon") {
        processCoordinates(coordinates);
      } else if (type === "MultiPolygon") {
        coordinates.forEach((polygon) => processCoordinates(polygon));
      }
    }

    // 计算每个图斑的几何中心点
    const firstRing = type === "Polygon" ? coordinates[0] : coordinates[0][0];
    const centroid = d3.polygonCentroid(
      firstRing.map((point) => offsetXY(point))
    );
    // 为地理单元添加标签
    const labelName = properties.XJQYMC || "未知区域"; // 如果 XJQYMC 为空，显示默认值
    const label = createLabel(labelName, centroid, depth);
    unit.add(label);

    // 将 XJQYDM 存储到 userData 中，便于点击事件访问
    unit.userData.XJQYDM = properties.XJQYDM;

    map.add(unit);
  });

  setCenter(map); // 将地图居中到场景中
  return map;
};

// 为多边形创建 3D 网格的函数
const createMesh = (data, color, depth) => {
  const shape = new THREE.Shape();
  data.forEach((item, idx) => {
    const [x, y] = offsetXY(item);

    if (idx === 0) shape.moveTo(x, -y);
    else shape.lineTo(x, -y);
  });

  const extrudeSettings = {
    depth: depth,
    bevelEnabled: false,
  };
  const materialSettings = {
    color: color,
    emissive: 0x000000,
    roughness: 0.45,
    metalness: 0.8,
    transparent: true,
    side: THREE.DoubleSide,
  };
  const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
  const material = new THREE.MeshStandardMaterial(materialSettings);
  const mesh = new THREE.Mesh(geometry, material);

  return mesh;
};

// 为多边形创建边界线的函数
const createLine = (data, depth, color) => {
  const points = [];
  data.forEach((item) => {
    const [x, y] = offsetXY(item);
    points.push(new THREE.Vector3(x, -y, 0));
  });
  const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

  // 调整边框粗细
  const uplineMaterial = new THREE.LineBasicMaterial({
    color: color,
    linewidth: 2,
  }); // 增加宽度
  const downlineMaterial = new THREE.LineBasicMaterial({
    color: color,
    linewidth: 2,
  }); // 增加宽度

  const upLine = new THREE.Line(lineGeometry, uplineMaterial);
  const downLine = new THREE.Line(lineGeometry, downlineMaterial);
  downLine.position.z = -0.0001;
  upLine.position.z = depth + 0.0001;

  return [upLine, downLine];
};

// 为地理单元创建标签的函数
const createLabel = (name, point, depth) => {
  if (!name) return; // 如果名称为空则跳过

  const div = document.createElement("div");
  div.style.color = "#fff";
  div.style.fontSize = "16px"; // 调整字体大小
  div.style.textShadow = "1px 1px 2px #047cd6";
  div.style.fontWeight = "bold";
  div.textContent = name; // 确保正确设置标签内容
  const label = new CSS2DObject(div);
  label.scale.set(0.01, 0.01, 0.01);

  // 设置标签位置为几何中心点
  label.position.set(point[0], -point[1], depth + 0.1); // 稍微调整深度以避免重叠

  return label;
};

// 为地理单元创建图标的函数
const createIcon = (point, depth) => {
  const url = new URL("../assets/icon.png", import.meta.url).href;
  const map = new THREE.TextureLoader().load(url);
  const material = new THREE.SpriteMaterial({
    map: map,
    transparent: true,
  });
  const sprite = new THREE.Sprite(material);
  const [x, y] = offsetXY(point);
  sprite.scale.set(0.3, 0.3, 0.3);

  sprite.position.set(x, -y, depth + 0.2);
  sprite.renderOrder = 1;

  return sprite;
};

// 将地图居中到场景中的函数
const setCenter = (map) => {
  map.rotation.x = -Math.PI / 2;
  const box = new THREE.Box3().setFromObject(map);
  const center = box.getCenter(new THREE.Vector3());

  const offset = [0, 0];
  map.position.x = map.position.x - center.x - offset[0];
  map.position.z = map.position.z - center.z - offset[1];
};
</script>

<style scoped lang="scss">
.map-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: black;

  .map-header {
    width: 100%;
    height: 7.41vh; // 80px
    // background-image: url("../../assets/img/bigScreenHeader.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    position: relative;

    .map-title {
      color: #ffffff;
      font-size: calc(24px + 0.42vw);
      font-weight: bold;
      text-align: center;
      font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .map-header-left {
      position: absolute;
      bottom: 0;
      // left: 20px;
      width: 18.5vw; // 200px
      height: 60%;
      display: flex;
      // justify-content: space-between;
      align-items: flex-start;
      box-sizing: border-box;
      margin-left: 1.2vw;

      .header-left-item {
        // width: 33%;
        height: 100%;
        // background-color: rgba(0, 198, 255, 0.8);
        border-radius: 0.26vw; // 5px
        display: flex;
        align-items: center;
        padding: 0 0.52vw; // 10px
        box-sizing: border-box;

        .item-icon {
          width: 1.5vw; // 20px
          height: 1.5vw; // 20px
          object-fit: contain;
        }

        .item-text {
          color: #ffffff;
          font-size: 0.9vw; // 12px
          font-weight: bold;
          white-space: nowrap;
        }

        .item-switch {
          --el-switch-on-color: #13ce66;
          --el-switch-off-color: #ff4949;
          margin-left: 0.3vw;
          transform: scale(0.8);
        }

        .item-dropdown {
          .el-dropdown-link {
            color: #ffffff;
            font-size: 0.9vw; // 12px
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: bold;

            .el-icon--right {
              margin-left: 0.26vw; // 5px
            }
          }
        }
      }
    }

    .map-header-right {
      position: absolute;
      bottom: 0;
      right: 1.04vw; // 20px
      height: 80%;
      // background-color: red;
      flex-shrink: 0;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      padding: 0.52vw; // 10px
      box-sizing: border-box;

      .datetime-display {
        text-align: right;
        color: #ffffff;
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
        line-height: 1.2;
        display: flex;
        align-items: center;

        .time {
          font-size: 1.25vw; // 24px
          font-weight: bold;
          margin-bottom: 0.28vh; // 3px
          text-shadow: 0 0 0.42vw rgba(0, 174, 255, 0.6); // 8px
          background: linear-gradient(45deg, #ffffff, #09add6);
          background-size: 400% 400%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          animation: timeGlow 2s ease-in-out infinite alternate;
          white-space: nowrap;
          margin-right: 1.04vw; // 20px
        }

        .date {
          font-size: 0.73vw; // 14px
          color: rgba(255, 255, 255, 0.9);
          text-shadow: 0 0 0.26vw rgba(255, 255, 255, 0.3); // 5px
          letter-spacing: 0.026vw; // 0.5px
          white-space: nowrap;
        }

        .weekday {
          font-size: 0.73vw; // 14px
          color: rgba(255, 255, 255, 0.8);
          text-shadow: 0 0 0.26vw rgba(255, 255, 255, 0.2); // 5px
          letter-spacing: 0.026vw; // 0.5px
          white-space: nowrap;
          margin-top: 0.19vh; // 2px
        }
      }
    }
  }

  @keyframes timeGlow {
    0% {
      background-position: 0% 50%;
      filter: brightness(1);
    }

    100% {
      background-position: 100% 50%;
      filter: brightness(1.2);
    }
  }

  /* 顶部图标导航样式 */
  .top-icons {
    position: absolute;
    top: 11.11vh; // 120px
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* 使用space-around实现自适应间距 */
    width: 55%;
    /* 设置容器宽度 */
    // max-width: 800px;
    /* 最大宽度限制 */
    z-index: 100;

    .top-icon-item {
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0.93vh 0.78vw; // 10px 15px
      border-radius: 2.6vw; // 50px
      display: flex;
      align-items: center;
      user-select: none;
      gap: 0.52vw; // 10px

      img {
        width: 2.6vw; // 50px
        height: 2.6vw; // 50px
        object-fit: contain;
        transition: all 0.3s ease;
      }

      .icon-item-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .index-text {
          margin: 0;
          font-size: calc(12px + 0.1vw);
          color: #00c6ff;
          font-weight: bold;
          text-shadow: 0 0 0.26vw rgba(0, 198, 255, 0.5); // 5px
        }

        .value-text {
          margin: 0;
          font-size: calc(16px + 0.21vw);
          color: #ffffff;
          font-weight: bold;
          text-shadow: 0 0 0.26vw rgba(255, 255, 255, 0.5); // 5px
        }
      }

      &:hover {
        transform: scale(1.05);
        background: rgba(0, 174, 255, 0.2);
        box-shadow: 0 0 0.78vw rgba(0, 174, 255, 0.5); // 15px

        img {
          filter: brightness(1.2);
        }
      }
    }
  }

  /* 地图容器的样式 */
  #map {
    background-image: url("../../assets/img/bigScreen.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    flex: 1;
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  /* 弹窗样式 */
  .popup-modal {
    position: absolute;
    width: 15.625vw; // 300px
    height: 18.52vh; // 200px
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.16vw); // 3px
    -webkit-backdrop-filter: blur(0.52vw); // 10px
    border: 0.05vw solid rgba(255, 255, 255, 0.2); // 1px
    border-radius: 0.42vw; // 8px
    box-shadow: 0 0.37vh 0.625vw rgba(0, 0, 0, 0.3); // 0 4px 12px
    z-index: 1000;
    transform: translate(-50%, -100%);
    margin-top: -0.93vh; // -10px
    pointer-events: auto;
  }

  .popup-content {
    padding: 0.625vw; // 12px
    color: #fff;
    font-size: 0.625vw; // 12px
    text-align: center;
  }

  #chart-container {
    width: 100%;
    height: 15vh;
  }

  .popup-content h3 {
    margin: 0 0 0.56vh 0; // 6px
    font-size: 0.73vw; // 14px
    font-weight: bold;
    text-shadow: 0.05vw 0.09vh 0.1vw rgba(0, 0, 0, 0.5); // 1px 1px 2px
  }

  .popup-content p {
    margin: 0;
    opacity: 0.9;
    text-shadow: 0.05vw 0.09vh 0.1vw rgba(0, 0, 0, 0.5); // 1px 1px 2px
  }
}
</style>
